<template>
  <div class="approve-drawer">
    <a-drawer
      :visible="isShowAuditDrawer"
      :footer="false"
      :width="900"
      title-align="start"
      :header="false"
      :render-to-body="false"
      unmountOnClose
    >
      <div class="drawer-container">
        <div class="drawer-title">
          <custom-title :title="drawerTitle" />
          <IconClose style="cursor: pointer" @click="handleDrawerCancel" />
        </div>
        <div class="drawer-body">
          <!--         审批表单 start   -->
          <div class="drawer-body__form">
            <div class="drawer-body__form__items" v-if="isShowAuditDrawer">
              <div v-if="auditInstanceId">审批ID：{{ auditInstanceId }}</div>
              <micro-app
                class="micro-app"
                name="form-design-todo-audit"
                :url="appUrlConfig.formDesign"
                baseroute="/form-design"
                default-page="/home"
                fiber
                :data="{ token: getToken() }"
                router-mode="native"
              />
            </div>
          </div>
          <!--         审批表单 end   -->
          <div class="drawer-body__audit">
            <div>审批记录</div>
            <div class="audit-list">
              <template v-if="auditRecordList.length">
                <div class="audit-item" v-for="item in auditRecordList" :key="item.nodeId">
                  <div class="audit-header">
                    <img :src="Avatar" alt="" />
                    <div>
                      <div class="audit-title">
                        {{ item.name }} <span>{{ item.finishTime }}</span>
                      </div>
                      <div class="audit-status">{{ auditUser(item) }}({{ auditResult(item) }})</div>
                    </div>
                  </div>
                  <div :class="{ 'audit-desc': true, divider: true }">
                    <div class="content" v-show="item.comment?.length">
                      <a-textarea :default-value="comment(item)" auto-size disabled />
                    </div>
                  </div>
                </div>
              </template>
              <a-empty v-else />
            </div>
          </div>
        </div>
      </div>
    </a-drawer>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { Message } from "@arco-design/web-vue";
import appUrlConfig from "@/config/appUrlconfig";
import { getToken } from "@/utils/auth";
import Avatar from "@/assets/images/default-avatar.png";
import { type AuditRecordItem, handlerTask } from "@/apis";
import { approvalDataByInstanceId } from "@/apis/audit";
import { auditStatusMap } from "@/views/home/components/components/auditList/config";
import { mainSendForceSetData } from "@/microApp/utils";

const props = defineProps({
  modelValue: Boolean,
  isAuditLog: Boolean,
  drawerTitle: {
    type: String,
    default: "审批"
  },
  // 审批相关参数
  auditData: {
    type: Object,
    default: () => ({})
  }
});
const emit = defineEmits(["update:modelValue"]);

const isShowAuditDrawer = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit("update:modelValue", val);
  }
});
const auditInstanceId = ref("");
const auditPostData = ref<any>({});
const auditRecordList = ref<AuditRecordItem[]>([]);
const auditResult = computed(() => {
  return (data: any) => {
    if (!data?.result) {
      return "审批中";
    }
    return auditStatusMap.get(data.result) || "";
  };
});
const auditUser = computed(() => {
  return (data: any) => {
    return data.user?.name || "";
  };
});
const comment = computed(() => {
  return (data: any) => {
    return data?.comment?.length ? data?.comment[0]?.text : "";
  };
});

/**
 * 加载表单/审批记录
 */
const getApprovalDataByInstanceId = async (defId: string, dataId: string) => {
  const { data } = await approvalDataByInstanceId(defId, dataId);
  auditInstanceId.value = data?.instanceId || "";
  auditRecordList.value = data?.processProgressVo?.progress ?? [];
};
getApprovalDataByInstanceId(props.auditData.processId, props.auditData.formInstanceId);
mainSendForceSetData("form-design-todo-audit", {
  auditData: { ...props.auditData, instanceId: props.auditData.formInstanceId },
  isHomeAudit: true // 表单禁用
});

/**
 * 提交审批
 */
const commentData = ref("");
const handelAuditAgree = async () => {
  auditPostData.value.action = "agree";
  commentData.value && (auditPostData.value.comment = { text: commentData.value });
  await handlerTask(auditPostData.value);
  handleDrawerCancel();
  Message.success("操作成功");
};
const handelAuditRefuse = async () => {
  auditPostData.value.action = "refuse";
  commentData.value && (auditPostData.value.comment = { text: commentData.value });
  await handlerTask(auditPostData.value);
  handleDrawerCancel();
  Message.success("操作成功");
};

/**
 * 关闭弹窗
 */
const handleDrawerCancel = () => {
  isShowAuditDrawer.value = false;
};
</script>

<style scoped lang="scss">
@import "auditDrawer";
</style>
